{extend name="common:base" /}

{block name="title"}{$data.title} - 天佑二手货{/block}
{block name="page"}goods-detail{/block}

{block name="css"}
<link rel="stylesheet" type="text/css" href="__STATIC__/css/lightbox.min.css">
<link rel="stylesheet" href="__STATIC__/css/cropper.min.css" />
{/block}

{block name="main"}
<div class="am-g am-g-fixed am-margin-top-lg">
<div class="am-u-sm-9">
    {switch name="$data.status"}
        {case value="-1"}
    <div class="am-alert am-alert-danger" data-am-alert>
        <button type="button" class="am-close">&times;</button>
        <p>该条信息被管理员驳回，原因是 “{$data.expand.reject_msg|default="empty"}”。<br>
        其他人无法查看该二手货，请解决问题后联系管理员进行恢复。</p>
    </div>
        {/case}
        {case value="0"}
    <div class="am-alert am-alert-warning" data-am-alert>
        <button type="button" class="am-close">&times;</button>
        <p>该条信息已被删除，其他人无法查看该二手货。</p>
    </div>
        {/case}
        {case value="2"}
    <div class="am-alert am-alert-warning" data-am-alert>
        <button type="button" class="am-close">&times;</button>
        <p>该二手货已被售出。</p>
    </div>
        {/case}
        {case value="3"}
    <div class="am-alert am-alert-danger" data-am-alert>
        <button type="button" class="am-close">&times;</button>
        <p>该二手货已下架。</p>
    </div>
        {/case}
        {case value="4"}
    <div class="am-alert am-alert-danger" data-am-alert>
        <button type="button" class="am-close">&times;</button>
        <p>该二手货因超过卖家设定的出售时间下架。</p>
    </div>
        {/case}
        {case value="5"}
    <div class="am-alert am-alert-warning" data-am-alert>
        <button type="button" class="am-close">&times;</button>
        <p>该卖家身份未进行在校验证，管理员正在审核该条信息。</p>
    </div>
        {/case}
    {/switch}
    <div class="am-g am-margin-bottom">
        <div class="am-u-sm-6">
            {if condition="!$data.thumb"}
            <img class="am-img-responsive" src="__ROOT__/static/images/no-thumb.png">
            {else /}
            <a title="{$data.title}" href="__ROOT__{$data.thumb}" data-lightbox="group-thumb">
                <img class="am-img-thumbnail" src="__ROOT__{$data.thumb}">
            </a>
            {/if}
        </div>
        <div class="am-u-sm-6 am-padding-top header">
            <div class="am-dropdown" data-am-dropdown>
                <a class="am-dropdown-toggle" href="javascript:;">
                    <h1 class="am-margin-bottom-0 am-text-truncate" title="{$data.title}">{$data.title}</h1>
                </a>
                <div class="am-dropdown-content">
                    <h3>修改题目</h3>
                    <form class="am-form-inline" role="form">
                        <div class="am-form-group am-form-icon">
                            <i class="am-icon-cny"></i>
                            <input type="text" name="title" class="am-form-field" placeholder="{$data.title}">
                        </div>
                        <button type="button" class="am-btn am-btn-default" onclick="modifyItem('title')">修改</button>
                    </form>
                </div>
            </div>
            <br>
            <br>
            <span class="price">
                <div class="am-dropdown" data-am-dropdown>
                    <a class="am-text-danger am-text-xl am-dropdown-toggle" href="javascript:;">
                        <i class="am-icon am-icon-xs am-icon-cny"></i>  {$data.price}
                    </a>
                    <div class="am-dropdown-content">
                        <h3>修改价格</h3>
                        <form class="am-form-inline" role="form">
                            <div class="am-form-group am-form-icon">
                                <i class="am-icon-cny"></i>
                                <input type="number" name="price" class="am-form-field" placeholder="{$data.price}">
                            </div>
                            <button type="button" class="am-btn am-btn-default" onclick="modifyItem('price')">修改</button>
                        </form>
                    </div>
                </div>
                <div class="am-dropdown" data-am-dropdown>
                    <a class="am-text-danger am-text-lg am-dropdown-toggle" href="javascript:;">
                        {$data.bargain}
                    </a>
                    <div class="am-dropdown-content">
                        <h3>调整砍价幅度</h3>
                        <form class="" role="form">
                            <div id="bargain" class="am-form-group">
                                <label class="am-radio">
                                    <input type="radio" name="bargain" data-bargain="不二价" value="0" data-am-ucheck> 不二价
                                </label>
                                <label class="am-radio">
                                    <input type="radio" name="bargain" data-bargain="可小刀" value="1" data-am-ucheck> 可小刀
                                </label>
                                <label class="am-radio">
                                    <input type="radio" name="bargain" data-bargain="随便砍" value="2" data-am-ucheck> 随便砍
                                </label>
                            </div>
                            <button type="button" class="am-btn am-btn-default" onclick="modifyItem('bargain')">修改</button>
                        </form>
                    </div>
                </div>
            </span>
            <br>
            <span class="area">交易地点:</span>
            <div class="am-dropdown" data-am-dropdown>
                <a class="am-text-lg am-dropdown-toggle" href="javascript:;">
                    {$data.area}
                </a>
                <div class="am-dropdown-content">
                    <h3>调整交易地点</h3>
                    <form class="" role="form">
                        <div id="area" class="am-form-group">
                            <label class="am-radio">
                                <input type="radio" name="area" data-area="南岸校区" value="1" data-am-ucheck> 南岸校区
                            </label>
                            <label class="am-radio">
                                <input type="radio" name="area" data-area="双福校区" value="2" data-am-ucheck> 双福校区
                            </label>
                        </div>
                        <button type="button" class="am-btn am-btn-default" onclick="modifyItem('area')">修改</button>
                    </form>
                </div>
            </div>
            <br>
            <span class="area">剩余时间:</span>
            <div class="am-dropdown" data-am-dropdown>
                <a class="am-text-lg am-dropdown-toggle" href="javascript:;">
                    {$data.deadline|get_time_diff}
                </a>
                <div class="am-dropdown-content">
                    <h3>重设上架时间</h3>
                    <form class="" role="form">
                        <div id="deadline" class="am-form-group">
                            <input class="am-input-sm" name="deadline" type="text" placeholder=" 3 ~ 180 (天)">
                        </div>
                        <button type="button" class="am-btn am-btn-default" onclick="modifyItem('deadline')">修改</button>
                    </form>
                </div>
            </div>
            <hr>
            {in name="$data.status" value="1"}
            <a class="am-btn am-btn-sm am-btn-secondary" data-am-modal="{target: '#popup-contact'}">联系卖家</a>
            {else/}
            <p>该二手货不在出售状态，已经隐藏该卖家信息。</p>
            {/in}
        </div>
    </div>
    {if condition="$data.expand.photos_count > 0"}
    <div class="am-g">
        <div class="am-g-sm-12">
            <div class="am-margin-top-lg good-description">{$data.description}</div>
            <ul class="am-avg-sm-4 am-margin-top-lg img-list">
                {volist name="data.expand.photos" id="vo"}
                <li>
                    <a title="{$data.title}" href="__ROOT__{$vo}" data-lightbox="group-{$data.good_id}">
                        <img class="am-img-thumbnail" src="__ROOT__{$vo}">
                    </a>
                    <a class="crop thumb" title="设为封面" onclick="setThumb(this)" data-uri="{$vo}" href="javascript:;">
                        <i class="am-icon-btn am-secondary am-icon-xs am-icon-book"></i>
                    </a>
                    <a class="crop close" title="移除该图片" onclick="removeCropBox(this)" data-uri="{$vo}" href="javascript:;">
                        <i class="am-icon-btn am-danger am-icon-xs am-icon-close"></i>
                    </a>
                </li>
                {/volist}
            </ul>
        </div>
    </div>
    {/if}
    <button class="am-btn am-btn-sm am-btn-primary" data-am-modal="{target: '#image-popup'}">添加展示图片</button>

    <div class="am-g-sm-12">
        
    </div>
    {in name="$data.status" value="1"}
    <div class="am-popup" id="popup-contact">
    <div class="am-popup-inner">
    <div class="am-popup-hd">
        <h4 class="am-popup-title">{$data.user_id|get_username} 的联系方式</h4>
        <span class="am-close" data-am-modal-close><i class="am-icon am-icon-sm am-icon-close"></i></span>
    </div>
    <div class="am-popup-bd">
        ...
    </div>
    </div>
    </div>
    {/in}

<div class="am-modal am-modal-prompt" tabindex="-1" id="image-popup">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">
            <sapn class="am-popup-title">添加展示图片</sapn>
            <span data-am-modal-close class="am-close">&times;</span>
        </div>
        <div class="am-u-sm-12">
            <span>图片格式必须为：bmp, jpeg, jpg, jpeg; 不可大于2M</span>
            <div class="am-form-group am-form-file">
                <button type="button" class="am-btn am-btn-default am-btn-sm">
                    <i class="am-icon-cloud-upload"></i> 添加展示图片</button>
                <input type="file" accept=".image,.gif,.jpg,.bmp" name="photofile" id="photofile" />
            </div>
            <div class="am-fl" id="box" style="width:200px;height:200px;">
                <img src="" id="srcimage" style="max-width:100%;">
            </div>
            <div class="am-fl" style="width:180px;height:180px;margin-left:25px;padding:0px;overflow:hidden;" id="newcro">
            </div>
        </div>
        <div class="am-g am-g-collapse croped-container"></div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" id="btn-modify-image" data-am-modal-confirm>添加</span>
        </div>
    </div>
</div>
<!--
TODO: 同店铺推荐
<div class="am-g am-margin-top-xl">
    <hr>
    <h3>该卖家还在卖这些</h3>
</div>
-->

</div>


<div class="am-u-sm-3" style="border-left: 1px solid #999;">
    预留侧边栏
</div>
</div>

{/block}

{block name="js"}
<script src="__STATIC__/js/lightbox.min.js"></script>
<script src="__STATIC__/js/cropper.min.js"></script>
<script type="text/javascript">
$('#bargain input[data-bargain="{$data.bargain}"]').uCheck('check');
$('#area input[data-area="{$data.area}"]').uCheck('check');
function modifyItem(itemName) {
    var postdata = {};
    switch (itemName) {
        case 'title':
        case 'price':
        case 'deadline':
            value = $('input[name="'+itemName+'"]').val();
            break;
        case 'area':
        case 'bargain':
            value = $('input[name="'+itemName+'"]:checked').val();
            break;
        default:
            console.log("error!");
            return;
    }
    if (!value) return;
    postdata[itemName] = value;
    postdata['good_id'] = {$data.good_id};
    $.post('{:url("goods/updateField")}', postdata, function(data) {
        if (data.code) {
            location.reload();
        } else {
            alert(data.msg);
        }
    });
}

//cropper配置
var cropperOptions = {
    aspectRatio: 4 / 3,//裁剪后图片比例
    background: 0,
    zoomable: 0,
    preview: '#newcro',
    crop: function(data) {}
};
var $image = $('#srcimage');
$image.cropper(cropperOptions);
//加载本地图片
$('#photofile').on('change', function() {
    var file = this.files[0];
    var url;
    url = URL.createObjectURL(file);
    $('#srcimage').attr('src', url);
    $image.cropper("replace", url);
});

// 存储图片列表，用于保存至表单
var piclist = [];
$('#btn-modify-image').on('click', function() {
    var data = $image.cropper('getCroppedCanvas'/*, {
        'width': 300,
        'height': 300
    }*/).toDataURL();
    $.post("{:url('api/upload/imagetmp')}", {
        "photo": data
    }, function(returndata) {
        if (returndata.code == 0) {
            piclist.push(returndata.path);
            $imguri = $(piclist).stringify();
            console.log($imguri);
            $.post("{:url('goods/addPhotos')}", {
                uri: $imguri,
                good_id: {$data.good_id}
            }, function(data) {
                console.log(data);
                if (data.code) {
                    $('#popup-addphoto').modal('close');
                    location.reload();
                }
            });
            //location.reload();
        } else {
            $alert = $('#am-alert');
            $alert.find('.content').text(returndata.msg);
            $alert.modal('open');
        }
    });
});
/**
 * croppic 图像处理
 */

// 修复点击添加图片时会提交表单
$('form').on('submit', function(event) {
    event.preventDefault();
});
// 移除展示图片
function removeCropBox(el) {
    var uri = $(el).attr('data-uri');
    $.post('{:url("goods/removePhoto")}', {
        uri: uri,
        good_id: {$data.good_id}
    }, function(data) {
        // 控制台显示远程移除结果
        console.log(data.msg);
        if (data.code) {
            $(el).parent('li').remove();
        }
    });
}

// 设置缩略图
function setThumb(el) {
    var uri = $(el).attr('data-uri');
    $.get('{:url("goods/setThumb")}', {
        uri: uri,
        good_id: {$data.good_id}
    }, function(data) {
        if (data.code) {
            location.reload();
        } else {
            $alert = $('#am-alert');
            $alert.find('.content').text(data.msg);
            $alert.modal('open');
        }
    });
}

// 提交表单
$.fn.stringify = function() {
    // 数组转化为json
    return JSON.stringify(this);
}
$('#photo-submit').on('click', function() {
    $imguri = $(piclist).stringify();
    console.log($imguri);
    $.post("{:url('goods/addPhotos')}", {
        uri: $imguri,
        good_id: {$data.good_id}
    }, function(data) {
        console.log(data);
        if (data.code) {
            $('#popup-addphoto').modal('close');
            location.reload();
        }
    });
});
</script>
{/block}